import React, { Component } from 'react';
//导入轮播图
import Swiper from "swiper";
//导入轮播图的样式
import "swiper/css/swiper.min.css";
//导入css样式
import "./banners.css"; 
 
class banners extends Component {
   componentDidUpdate(){
       //初始化轮播图的控制器
       new Swiper(".swiper-container", {
            autoplay: false,
            pagination: {
                el: '.swiper-pagination',
            }
        });
   }
    render() {
        return (
            <div className="swiper">
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                        {this.props.children ? this.props.children.map((child, index)=>{
                            return (<div className="swiper-slide" key={index}>{child}</div>)
                        }):null}
                    </div>
                </div>
                <div className="swiper-pagination"></div>
            </div>
        );
    }
}

export default banners;